<template>
	<div class="page">
		<Head />
		<div class="j-tabs-bar">
			<el-menu :default-active="$route.path" :router="true" class="j-tabs" mode="horizontal">
				<el-menu-item index="/cw-page"><span>余额充值</span></el-menu-item>
				<el-menu-item index="/cw-page-xf"><span>消费记录</span></el-menu-item>
				<el-menu-item index="/cw-page-cz"><span>充值记录</span></el-menu-item>
				<el-menu-item index="/cw-page-rz"><span>余额日志</span></el-menu-item>
			</el-menu>
		</div>
		<div class="page-main">
			<div class="j-panel">
				<!-- 头部 -->
				<div class="j-panel-head flex-between">
					<div class="j-tit">余额日志</div>
					<div class="cw-middle">
						<div class="cw-item">今日消耗 <span class="v">1778</span></div>
						<div class="cw-item">昨日消耗 <span class="v">1547</span></div>
						<div class="cw-item">近7天内消耗 <span class="v">1547</span></div>
					</div>
					<div class="j-icons">
						<el-button type="primary" icon="iconfont icon-file" circle></el-button>
						<el-button type="success" icon="iconfont icon-shangchuan" circle></el-button>
						<el-button type="blue" icon="iconfont icon-shuaxin" circle></el-button>
					</div>
				</div>
				<!-- body -->
				<div class="j-panel-body">
					<!-- bar -->
					<div class="ac-bar">
						<el-checkbox @change="allChange" size="small" v-model="allCk" label="全选" border></el-checkbox>
						<el-select size="small" v-model="selectV" multiple collapse-tags placeholder="选择项">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<div class="radio-ac-bar">
							<div class="l-file">
								<i class="iconfont icon-wenjian"></i>
							</div>
							<el-radio-group v-model="radioV">
								<el-radio :label="1">JSON</el-radio>
								<el-radio :label="2">XML</el-radio>
								<el-radio :label="3">CSV</el-radio>
								<el-radio :label="4">TXT</el-radio>
								<el-radio :label="5">MS-Word</el-radio>
								<el-radio :label="6">MS-Excel</el-radio>
							</el-radio-group>
							<div class="r-file">
								<span class="iconfont icon-xiazai"></span>
							</div>
							<div class="ac-arrow">
								<i class="iconfont icon-left"></i>
							</div>
						</div>
						<div class="ac-search">
							<el-input size="small" v-model="input" placeholder="请输入搜索关键字"></el-input>
							<el-button size="small"><i class="iconfont icon-sou"></i></el-button>
						</div>
					</div>
					<!-- 表格 -->
					<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
						<el-table-column prop="num" width="80">
							<template slot-scope="scope">
								<div class="num-box" >{{ scope.row.num }}</div>
							</template>
						</el-table-column>
						<el-table-column property="tid" label="任务ID" >
						</el-table-column>
						<el-table-column property="tprice" label="余额" >
							<template slot-scope="scope">
								<span class="text-orange" >{{ scope.row.tprice }}</span>
							</template>
						</el-table-column>
						<el-table-column property="tbgq" label="变更前">
						</el-table-column>
						<el-table-column property="tbgh" label="变更后">
						</el-table-column>
						<el-table-column property="tbz" label="备注">
						</el-table-column>
						<el-table-column property="tdate" label="创建时间">
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<div class="page-cell">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="30" layout="prev, pager, next,jumper,total" :total="400">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				options: [{
					value: '选项1',
					label: '任务ID'
				}, {
					value: '选项2',
					label: '余额'
				}, {
					value: '选项3',
					label: '变更前'
				}, {
					value: '选项4',
					label: '变更后'
				}, {
					value: '选项5',
					label: '备注'
				}, {
					value: '选项6',
					label: '创建时间'
				}],
				selectV: [],
				allCk: false,
				input: '',
				radioV: 1,
				currentPage:1,
				tableData: [
					{
						num:'01',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'02',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'03',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'04',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'05',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'06',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},{num:'07',
						tid: '1468243',
						tprice: '-3.90',
						tbgq: '-11.70',
						tbgh: '-15.60',
						tbz: '任务达标扣费',
						tdate: '2016-05-02',
					},
				]
			};
		},
		methods: {
			allChange(val){
				console.log(val)
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>
